<template>
	<view class="container">
		<view class="ver-layout content-layout">
      <view class="input-view">
        <input class="form__input" data-index="1" @focus="inputListener" @blur="index=-1;" :style="filterFocus1" type="text"
               v-model="inputValue" :placeholder="getHintText">
      </view>
			<view class="input-view hor-layout-center">
				<input class="form__input" data-index="2" @focus="inputListener" @blur="index=-1;" :style="filterFocus2" v-model="code"
				 maxlength="6" placeholder="验证码">
				<view class="send-yzm" :class="{'no-use':!canSendButtonUse}" @click="sendVerifyCode">{{hintVerify}}</view>
			</view>
			<button class="login-btn" :type="canLoginButtonUse?'primary':'default'" :class="{'no-use':!canLoginButtonUse}"
			 @click="loginClick">提交</button>
		</view>
	</view>
</template>

<script>
	import loginUtils from "@/common/login-utils.js"
	const focusStyle = {
		boxShadow: "inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9"
	}
	export default {
		data() {
			return {
				index: -1,
				hintVerify: '发送验证码',
				inputValue: '',
				preValue: '',
				code: '',
				userObj: {}
			}
		},
		computed: {
			filterFocus1() {
				return this.index == 1 ? focusStyle : ""
			},
			filterFocus2() {
				return this.index == 2 ? focusStyle : ""
			},
			canSendButtonUse() {
				return this.canSendUse()
			},
			canLoginButtonUse() {
				return this.canLoginUse()
			},
			getHintText() {
				if (this.userObj.tag === "email") {
					return "请输入邮箱"
				} else {
					return "请输入手机号"
				}
			}
		},
		onLoad(options) {
			let userObj = JSON.parse(options.userObj)
			// let userObj = {
			// 	tag: "email",
			// 	key: "邮箱",
			// 	value: ""
			// }
			console.log("userObj", userObj)
			this.userObj = userObj
			this.inputValue = userObj.value
			this.preValue = userObj.value
			uni.setNavigationBarTitle({
				title: `更新${userObj.key}`
			})
		},
		methods: {
			// 登录监听
			loginClick() {
				let canLogin = this.canLoginUse()
				if (!canLogin)
					return
				let type = this.userObj.tag === "email" ? 1 : 2
				loginUtils.bindYzmData(type, this.inputValue, this.code, () => {
					setTimeout(() => {
						uni.navigateBack({
							complete: res => {}
						});
					}, 1000)
				})
			},
			// 发送验证码
			sendVerifyCode() {
				let canSend = this.canSendUse()
				if (!canSend)
					return
				this.startTimeCounter()
				if (this.userObj.tag === "email") {
					loginUtils.sendEmailCode(this.inputValue, "bind")
				} else {
					loginUtils.sendMobildCode(this.inputValue, "bind")
				}
			},
			canLoginUse() {
				if (this.userObj.tag === "email") {
					return this.canEmailLogin()
				} else {
					return this.canMobileLogin()
				}
			},
			canSendUse() {
				if (this.userObj.tag === "email") {
					return this.canEmailSend()
				} else {
					return this.canMobileSend()
				}
			},
			canEmailSend() {
				if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.inputValue))
					return false
				if (this.hintVerify != "发送验证码")
					return false
				if (this.inputValue === this.preValue)
					return false
				return true
			},
			canMobileSend() {
				if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.inputValue))
					return false
				if (this.hintVerify != "发送验证码")
					return false
				if (this.inputValue === this.preValue)
					return false
				return true
			},
			canMobileLogin() {
				if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.inputValue))
					return false
				if (this.code.length != 6)
					return false
				if (this.inputValue === this.preValue)
					return false
				return true
			},
			canEmailLogin() {
				if (!/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(this.inputValue))
					return false
				if (this.code.length != 6)
					return false
				if (this.inputValue === this.preValue)
					return false
				return true
			},
			startTimeCounter(flag = 0) {
				var num = 20;
				var timer = setInterval(() => {
					num--
					let strVerify = `${num}秒后重试`
					if (num == 0) {
						clearInterval(timer)
						strVerify = "发送验证码"
					}
					if (flag == 0) {
						this.hintVerify = strVerify
					} else {
						this.hintVerify = strVerify
					}
				}, 1000)
			},
			inputListener(ev) {
				console.log(ev)
				let index = ev.currentTarget.dataset.index
				// 如果是支持获取height的平台可以这样做
				if (ev.detail && ev.detail.height > 0) {
					this.index = parseInt(index)
				}
				this.index = parseInt(index)
			},
		}
	}
</script>

<style>
	page {
		background: #F4F4FA;
	}

	.content-layout {
		margin: 20px;
		padding: 15px 25px;
		background-color: #ecf0f3;
		box-shadow: 0 0 5px #b4bfe3;
		border-radius: 5px;
	}

	.form__input {
		flex: 1;
		height: 30px;
		margin: 7px 0;
		padding-left: 15px;
		font-size: 13px;
		letter-spacing: .15px;
		border: 0;
		outline: 0;
		font-family: 'Montserrat', sans-serif;
		background-color: #ecf0f3;
		transition: .25s ease;
		border-radius: 8px;
		box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9
	}

	.form__input:focus {
		box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9
	}

	.input-view {
		position: relative;
		height: 30px;
		margin: 7px 0px;
	}

	.send-yzm {
		position: absolute;
		color: white;
		right: 3px;
		top: 3px;
		z-index: 100;
		padding: 0px 3px;
		height: 24px;
		line-height: 24px;
		font-size: 12px;
		letter-spacing: 1px;
		background-color: #00BDFF;
		border-radius: 5px;
	}

	.no-use {
		color: white;
		background-color: gray;
	}

	.login-btn {
		font-size: 15px;
		margin: 15px 50px;
		font-size: small;
		margin-bottom: 0px;
	}
</style>
